<template>
    <NavBar :bgc="color"></NavBar>
    <div class="box"> 
      <p class="current_design"><span class="home" @click="gohome">首页</span> > 简历攻略和教程,教你快速写出好的简历</p> 
    </div>
    <div class="resume_box">
      <div class="strategy_left">
         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="简历攻略" name="first">
              <li class="item" v-for="(item,index) in objectArray" :key="item.id">
                <div class="strategy_img"><img :src=item.img alt="" ></div>
                <div class="strategy_text">
                  <a  class="title" @click="gotoGuide(item.id)">{{item.title}}</a>
                  <p class="center">{{item.small_title}}</p>
                  <div class="bottom">
                    <p class="name">{{item.tip}}</p>
                    <p class="name">{{item.skill}}</p>
                    <p class="time">{{item.date}}</p>
                  </div>
                </div>
              </li>
            </el-tab-pane>
            <el-tab-pane label="简历范文" name="second"><li class="item" v-for="(item,index) in resumeInterview" :key="item.id">
                <div class="strategy_img"><img :src=item.img alt="" ></div>
                <div class="strategy_text">
                  <a href="" class="title">{{item.title}}</a>
                  <p class="center">{{item.small_title}}</p>
                  <div class="bottom">
                    <p class="time">{{item.date}}</p>
                  </div>
                </div>
              </li></el-tab-pane>
            <el-tab-pane label="面试攻略" name="third">面试攻略</el-tab-pane>
            <el-tab-pane label="职场攻略" name="fourth">职场攻略</el-tab-pane>
          </el-tabs>
      </div>
      <div class="strategy_right">
        <p class="tips">制作简历tips</p>
        <ul>
          <li>1、清晰简洁的格式: 选择简单清晰的布局，使用合适的字体和字号。</li>
          <li>2、强调关键信息,避免使用模糊词汇和冗长的句子,让招聘者能够快速获取到关键信息。</li>
          <li>3、调整简历的内容，突出与职位相关的技能和经验。</li>
          <li>4、注重强调你的成就和贡献，而不仅仅是列举工作职责.</li>
          <li>5、用粗体、斜体或下划线等方式突出重要信息，</li>
          <li>6、重点突出:在简历中使用与目标职位相关的关键词，以增加简历被筛选的机会。</li>
          <li>7、在简历的顶部添加一个简短的个人摘要或职业目标，让招聘者能够快速了解你的专业背景和求职意向。</li>
          <li>8、正确的格式和文件类型: 将简历保存为PDF格式，以确保格式在不同设备上都能保持一致。</li>
        </ul>
      </div>
    </div>
</template>
<script setup lang="ts">
import NavBar from '@/components/NavBar/NavBar.vue'
import { useRouter } from 'vue-router'
import navBarHanlder from '@/util/scrollHandler.ts'
import { ref ,reactive} from 'vue'

// 定义对象类型的数组
const objectArray = reactive([
  { id: 4403, name: 'John',title:'自然语言处理工程师简历的技能特长怎么写？',img:'src/assets/images/strategy/1.jpg', small_title:'在当今数据驱动的社会中，自然语言处理（NLP）已经成为一项关键技术，它被广泛应用于搜索引擎、聊天机器人、智能助理等领域.',tip:'机器学习工程师',skill:'写作技巧',date:'2024-5-10' },
  { id: 4113, name: 'Tom',title:'运维总监简历的兴趣爱好怎么写？',img:'src/assets/images/strategy/2.jpg',small_title:'在撰写运维总监简历时，兴趣爱好的部分也是一个重要的内容。',tip:'运维总监',skill:'兴趣爱好',date:'2024-5-2' },
  { id: 4123, name: 'John',title:'机器学习工程师简历的项目经验怎么写？？',img:'src/assets/images/strategy/3.jpg', small_title:'在当今竞争激烈的技术行业，机器学习工程师已经成为备受追捧的职业之一。',tip:'机器学习工程师',skill:'项目经验',date:'2024-3-10' },
  { id: 4713, name: 'John',title:'运维总监简历的自我评价怎么写？',img:'src/assets/images/strategy/4.jpg',small_title:'写作一份优秀的运维总监简历需要遵循一些关键技巧，以突出你的专业能力和管理经验如系统管理、网络安全、故障排除等方面的能力。',tip:'机器学习工程师',skill:'管理经验',date:'2024-3-34' },
  { id: 4406, name: 'John',title:'算法工程师的简历写作技巧？', img:'src/assets/images/strategy/5.jpg',small_title:'作为一名算法工程师，自我评价是展示个人能力和专业素养的重要途径。一篇优秀的自我评价应该全面展示自己在算法设计、数据分析、以及团队合作等方面',tip:'算法工程师',skill:'自我评价',date:'2024-2-1' },
  { id: 4483, name: 'John',title:'机器学习工程师的简历写作技巧？', img:'src/assets/images/strategy/6.jpg',small_title:'写一份成功的继器学习工程师简历需要注意以下技巧',tip:'机器学习工程师',skill:'写作技巧',date:'2024-5-10' },

]);
const resumeInterview = reactive([
  { id: 1, name: 'John',title:'消防工程师简历模板范文',img:'src/assets/images/strategy/interview1.jpg', small_title:'消防工程师简历范文模板：姓名:小娟，职位:消防工程师，教育背景:北京理工大学（本科），主修课程:流体力学、热力学、消防工程基础、建筑消防与安全技术、火灾自动检测与报警技术、应急管理与',tip:'机器学习工程师',skill:'写作技巧',date:'2024-5-10' },
  { id: 2, name: 'Tom',title:'二手车评估师简历模板范文',img:'src/assets/images/strategy/interview2.jpg',small_title:'二手车评估师简历范文模板：姓名:林海，职位:二手车评估师，教育背景:某某大学（本科），主修课程:汽车设计、汽车制造工艺、汽车电子技术',tip:'运维总监',skill:'兴趣爱好',date:'2024-5-2' },
  { id: 3, name: 'John',title:'汽车配件销售简历模板范文',img:'src/assets/images/strategy/interview3.jpg', small_title:'汽车配件销售简历范文模板：姓名:诸葛，职位:汽车配件销售，教育背景:全民简历科技大学（本科），主修课程:汽车设计与制造、汽车电子控制技术、汽车材料与加工',tip:'机器学习工程师',skill:'项目经验',date:'2024-3-10' },
  { id: 4, name: 'John',title:'汽车销售简历模板范文',img:'src/assets/images/strategy/interview4.jpg',small_title:'写作一份优秀的运维总监简历需要遵循一些关键技巧，以突出你的专业能力和管理经验如系统管理、网络安全、故障排除等方面的能力。',tip:'机器学习工程师',skill:'管理经验',date:'2024-3-34' },
  { id: 5, name: 'John',title:'汽车4S店店长简历模板范文', img:'src/assets/images/strategy/interview5.jpg',small_title:'汽车销售简历范文模板：姓名:王腾，职位:汽车销售，教育背景:全民简历科技大学（本科），主修课程:市场营销学、消费者行为学、市场调研与预测、国际贸易实务、公共关系学等',tip:'算法工程师',skill:'自我评价',date:'2024-2-1' },
  { id: 6, name: 'John',title:'机器学习工程师的简历范文？', img:'src/assets/images/strategy/interview6.jpg',small_title:'写一份成功的继器学习工程师简历需要注意以下技巧',tip:'机器学习工程师',skill:'写作技巧',date:'2024-5-10' },
  { id: 6, name: 'John',title:'机器学习工程师的简历范文？', img:'src/assets/images/strategy/interview7.jpg',small_title:'写一份成功的继器学习工程师简历需要注意以下技巧',tip:'机器学习工程师',skill:'写作技巧',date:'2024-5-10' },

]);
const activeName = ref('first')
const handleClick = (tab, event) => {
  console.log(tab, event)
}
const router = useRouter()
function customizeResume() {
    router.push({name:'customize'})
  }
function gohome() {
    router.push({name:'home'})
}
function gotoGuide(id) {
    router.push({name:'guide', query: { id: id } })
    
}
navBarHanlder()
</script>
<style lang="scss" scoped>
  @mixin size($w, $h) {
  width: $w;
  height: $h;
}
  .box {
    padding: 120px 0 0 145px;
    background-color: #EBF3FA;
    .current_design {
      color: #0d1216;
      font-size: 16px;
      letter-spacing: 1px;
      height: 30px;
      border-bottom:1px solid #dfdfdf;
    }
    .home {
      cursor: pointer;
    }
  }
  .resume_box {
    padding: 20px 120px;
    display: flex;
    background-color: #EBF3FA;
    .strategy_left {
      width: 70%;
      background-color: #ffffff;
      padding:0 30px ;
      .item {
        list-style-type: none;
        display: flex;
        .strategy_img {
          width: 180px;
          height: 120px;
          margin:20px 20px;
          img {
            width: 100%;
          }
        }
        .strategy_text {
          margin:20px 0;
          .title {
            font-size: 18px;
             text-decoration: none;
             color:black;
             cursor: pointer;
          }
          .title:hover {
            color:green;
          }
          .center {
            width: 650px;
            margin: 16px 0;
            font-size: 12px;
            color:#888;
            height: 30px;
            line-height: 30px;
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
          }
          .bottom {
            display: flex;
            align-items: center;
            color:#B1AAB1;
            .name {
              font-size: 12px;
              height: 20px;
              width: 130px;
              text-align: center;
              border-radius:8px;
              background-color: #F5F5F5;
              line-height: 20px;
            }
            .time {
              margin-left: 10px;
              font-size: 12px;
            }
          }
        }
      }
    }
    .strategy_right {
      width: 30%;
      margin-left: 10px;
      background-color: #ffffff;
      .tips {
        height: 40px;
        padding-left:10px;
        border-bottom: 2px solid #e4e7ed;
        font-weight:500;
        line-height: 40px;
      }
      ul {
      padding: 10px;
          li {
          line-height: 22px;
          color:#B1AAB1;
          font-size:14px;
        }
      }
     
    }
  }
</style>
